<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .color_list{            
    display: flex;            
    display: -webkit-flex;        
}        
.color_list li{            
    width: 100px;            
    height: 100px;            
    list-style: none;            
    text-align: center;            
    line-height: 100px;        
}
.color_list li:nth-child(1){
    background-color: red;
}
.color_list li:nth-child(2){
    background-color: orange;
}
.color_list li:nth-child(3){
    background-color: yellow;
}
.color_list li:nth-child(4){
    background-color: green;
}
.color_list li:nth-child(5){
    background-color: blue;
}
.color_list li:nth-child(6){
    background-color: purple;
}
.box{            
    width: 600px;            
    height: 150px;            
    background-color: #cccccc;            
    line-height: 150px;            
    text-align: center;        
}

    </style>
</head>
<body>
    <ul class="color_list">        
        <li>red</li>        
        <li>orange</li>        
        <li>yellow</li>        
        <li>green</li>        
        <li>blue</li>        
        <li>purple</li>    
    </ul>
    <div class="box"></div>
</body>

<script>
    
    var color_list=document.querySelector(".color_list");            
    var colors=color_list.getElementsByTagName("li");            
    var box=document.querySelector(".box");    
    
    // 给每个li绑定事件
    // for(var n=0;n<colors.length;n++){                
    //      colors[n].addEventListener("click",function(){                    
    //     console.log(this.innerHTML)                    
    //     box.innerHTML="该颜色为 "+this.innerHTML;                
    //     })            
    // }

    // 事件代理 绑定一个事件到 ul 上
    // 冒泡事件机制 li冒泡到ul
    function colorChange(e){                
    var e=e||window.event;//兼容性的处理         
    if(e.target.nodeName.toLowerCase()==="li"){                    
        box.innerHTML="该颜色为 "+e.target.innerHTML;                
        }                            
    }            
    color_list.addEventListener("click",colorChange,false)
</script>
</html>